<template>
	<view>
		<view class="user-card" v-for="(item,inedx) in dataList" :key="inedx" @click="enterDetail(item)">

			<view class="user-info">
				<view class="c-left">
					<image @click.stop="enterPersionCenter($event,item)" @touchmove.stop.prevent="handletouchmove"
						@touchstart.stop.prevent="handletouchstart($event,item)"
						@touchend.stop.prevent="handletouchend($event,item)" class="userImg"
						@error="imgerror($event, inedx)"
						:src="item.userimages||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'"
						mode="aspectFit"></image>
					<!-- <image class="avatar-bottom"
						src="https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_bottom.png" mode="">
					</image> -->
					<view class="user-name">
						<view class="user-name-view" @click.stop="enterPersionCenter($event,item)">
							<!-- <view >{{item.userName}}</view> -->
							<view class="user_name_text" v-if="item.wechatName==''||item.wechatName==null">
								<text class="user_name_text" v-if="item.phone==null||item.phone==undefined">
									已注销用户
								</text>
								<text class="user_name_text" v-else>
									{{item.phone.substr(0, 3) + '*****' + item.phone.substr(8)}}
								</text>
							</view>
							<text class="user_name_text" v-else>{{item.wechatName}}</text>
							<!-- 六期徽章 -->
							<image v-if="item.isUseBadge&&item.isUseBadge==0&&item.badgeImg" class="badge_image"
								:src="item.badgeImg"></image>
							<image v-else class="badge_image"
								src="https://dnsverify.pfmoto.com/appstatic/my/badge_2.png" style="visibility: hidden;">
							</image>



						</view>

						<!-- 六期认证 -->
						<view class="user-name-view">
							<view class='renzheng'
								v-if="item.officialTalentName!=undefined&&item.officialTalentName!=null&&item.officialTalentName!=''">
								<image class="icon-ok" src="https://dnsverify.pfmoto.com/appstatic/community/ok.png">
								</image>
								<!-- 认证用户 -->
								<text class="user-tips">{{item.officialTalentName}}</text>
							</view>
							<block v-else-if="item.isUseExpert==0">
								<image class="expertCertification_image"
									src="https://dnsverify.pfmoto.com/appstatic/my/expert_chuangzuo_2.png"
									v-if="item.expertName=='创作达人'"> </image>
								<image class="expertCertification_image"
									src="https://dnsverify.pfmoto.com/appstatic//my/expert_daihuo_2.png"
									v-else-if="item.expertName=='带货达人'"> </image>
								<image class="expertCertification_image"
									src="https://dnsverify.pfmoto.com/appstatic//my/expert_zhishi_2.png"
									v-else-if="item.expertName=='知识达人'"> </image>
								<image class="expertCertification_image"
									src="https://dnsverify.pfmoto.com/appstatic//my/expert_gongchuang_2.png"
									v-else-if="item.expertName=='共创达人'"> </image>
								<image class="expertCertification_image"
									src="https://dnsverify.pfmoto.com/appstatic//my/expert_qixing_2.png"
									v-else-if="item.expertName=='骑行达人'"> </image>
							</block>
						</view>

					</view>
				</view>

				<view v-if="item.authorId!== loginId">
					<text :class="item.isFocus==1?'gz active':'gz'"
						@click.stop="focusCommunity($event,item)">{{!item.isFocus?"关注":"已关注"}}</text>
				</view>
			</view>
			<view class="user-action detail" v-if="type == 'detail' &&isLocalResources=='false' ">
				<text class="user-action-text">{{item.createTime | timeFrom}}</text>
				<view class="action-wraper">
					<image class="user-action-img" src="https://dnsverify.pfmoto.com/appstatic/community/ac-3.png"
						mode="aspectFill">
					</image>
					<text class="user-action-text">{{item.viewsNum||'0'}}</text>
				</view>
			</view>




			<view class="content" v-if="item.subType == 1&& type == 'list'">

				<text class="rich-text">{{item.content}}</text>
			</view>
			<view class="content" v-if="item.subType == 1&& type == 'detail'">
				<text class="detail_">{{item.content}}</text>
				<!-- <u-parse class="rich-text detail_" :content="item.content"></u-parse> -->
			</view>
			<view class="content" v-if="item.subType !==1&& type == 'list'">

				<text class="rich-text">{{item.titleArticle}}</text>
			</view>
			<view class="content" v-if="item.subType !== 1&& type == 'detail'">
				<!-- <rich-text  :nodes="item.content"></rich-text> -->
				<u-parse class="rich-text detail_" :content="item.content"></u-parse>
			</view>
			<view class="media-wraper" id="webpublishCoverArticle"
				v-if="item.subType != 1&&item.webpublishCoverArticle&& type == 'list'">
				<image class="media-wraper-image" @click.stop="previewArtivceImage($event,item.webpublishCoverArticle)"
					:src="item.webpublishCoverArticle" mode="aspectFill"></image>
			</view>
			<view class="media-wraper" v-if="item.imgList.length>0 && item.subType == 1">

				<view v-if="item.typeTrend != 2">
					<view v-if="item.imgList.length!==3&&item.imgList.length!==6"
						:class="(item.imgList.length === 1 ? '': 'img-box') +  ' img-box' + item.imgList.length">
						<view class='img-item' v-for='(img_item, index) in item.imgList' :key='index'>
							<image :class="'media-wraper-image' +  ' img-'+item.imgList.length + index" class=""
								@click.stop="previewImage($event,item.imgList,index)"
								:src="img_item+'?x-amz-process=image/resize,w_750/quality,Q_80'" mode="aspectFill">
							</image>
						</view>
					</view>
					<view v-if="item.imgList.length === 3"
						:class="(item.imgList.length === 1 ? '': 'img-box') +  ' img-box' + item.imgList.length">
						<image @click.stop="previewImage($event,item.imgList,0)" class="media-wraper-image img-30"
							:src="item.imgList[0]+'?x-amz-process=image/resize,w_750/quality,Q_80'" mode="aspectFill" />
						<view class="media-wraper-image-36">
							<image @click.stop="previewImage($event,item.imgList,1)" class="media-wraper-image img-31"
								:src="item.imgList[1]+'?x-amz-process=image/resize,w_750/quality,Q_80'"
								mode="aspectFill" />
							<image @click.stop="previewImage($event,item.imgList,2)" class="media-wraper-image img-32"
								:src="item.imgList[2]+'?x-amz-process=image/resize,w_750/quality,Q_80'"
								mode="aspectFill" />
						</view>
					</view>
					<view v-if="item.imgList.length === 6"
						:class="(item.imgList.length === 1 ? '': 'img-box') +  ' img-box' + item.imgList.length">
						<image @click.stop="previewImage($event,item.imgList,0)" class="media-wraper-image img-60"
							:src="item.imgList[0]+'?x-amz-process=image/resize,w_750/quality,Q_80'" mode="aspectFill" />
						<view class="media-wraper-image-36">
							<image @click.stop="previewImage($event,item.imgList,1)" class="media-wraper-image img-61"
								:src="item.imgList[1]+'?x-amz-process=image/resize,w_750/quality,Q_80'"
								mode="aspectFill" />
							<image @click.stop="previewImage($event,item.imgList,2)" class="media-wraper-image img-62"
								:src="item.imgList[2]+'?x-amz-process=image/resize,w_750/quality,Q_80'"
								mode="aspectFill" />
						</view>
						<image @click.stop="previewImage($event,item.imgList,3)" class="media-wraper-image img-63"
							:src="item.imgList[3]+'?x-amz-process=image/resize,w_750/quality,Q_80'" mode="aspectFill" />
						<image @click.stop="previewImage($event,item.imgList,4)" class="media-wraper-image img-64"
							:src="item.imgList[4]+'?x-amz-process=image/resize,w_750/quality,Q_80'" mode="aspectFill" />
						<image @click.stop="previewImage($event,item.imgList,5)" class="media-wraper-image img-65"
							:src="item.imgList[5]+'?x-amz-process=image/resize,w_750/quality,Q_80'" mode="aspectFill" />
					</view>
				</view>
				<view v-else @click.stop="preventItemClick($event)"
					style="width: 700rpx;height: 402rpx;margin-bottom: 20rpx;position: relative;">
					<r-video :autoplay="false" :poster="item.poster" :loop="true" style="width: 700rpx;height: 402rpx;"
						:src="item.imgList[0]">
					</r-video>
				</view>
			</view>



			<view class="topic" v-if="item.topicList.length">
				<view class="topic-item" @click.stop="enternTopicDetail($event,v)" v-for="(v,index) in item.topicList"
					:key="index">
					<image class="topic-item_img" src="https://dnsverify.pfmoto.com/appstatic/community/topic-icon.png"
						mode="aspectFill" />
					<text class="topic-item-text">{{v.topicName||""}}</text>
				</view>
			</view>
			<view class="compent" v-if="type == 'list'&&item.comment">
				<text class='compent-user' v-if="item.comment.wechatName==''||item.comment.wechatName==null">
					<text class="compent-user" v-if="item.comment.phone==null||item.comment.phone==undefined">
						已注销用户:{{item.comment.content}}
					</text>
					<text class="compent-user" v-else>
						{{item.comment.phone.substr(0, 3) + '*****' + item.comment.phone.substr(8)}}:{{item.comment.content}}
					</text>
				</text>
				<text class='compent-user' v-else>{{item.comment.wechatName}}: {{item.comment.content}}</text>

			</view>


			<view class="user-action" v-if="type == 'list'||(type == 'detail' &&isLocalResources=='true')">
				<text class="user-action-text">{{item.createTime | timeFrom}}</text>
				<view class="action-wraper">
					<image style="width: 29rpx;height: 24rpx;"
						src="https://dnsverify.pfmoto.com/appstatic/community/ac-3.png" mode="aspectFill" />
					<text class="user-action-text">{{item.viewsNum||'0'}}</text>
					<image style="width: 30rpx;height: 28rpx;" @click.stop="thumbCommuntyTouched($event,item)"
						v-if="item.isThumbs" src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
						mode="aspectFill" />
					<image style="width: 30rpx;height: 28rpx;" @click.stop="thumbCommuntyTouched($event,item)" v-else
						src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png" mode="aspectFill" />

					<text class="user-action-text"
						@click.stop="thumbCommuntyTouched($event,item)">{{item.thumbsNum||'0'}}</text>
					<image style="width: 28rpx;height: 26rpx;" @click.stop="openMement($event,item)"
						src="https://dnsverify.pfmoto.com/appstatic/community/ac-2.png" mode="aspectFill"
						v-if="isLocalResources=='false'" />
					<text class="user-action-text" @click.stop="openMement($event,item)"
						v-if="isLocalResources=='false'">{{item.commentNum||'0'}}</text>
				</view>
			</view>













		</view>
		<shieldPanel :shielid="shielid" @cancleComplate="cancleComplate" v-if="showShielid" />
	</view>
</template>

<script>
	const app = getApp();
	const util = require("@/utils/util.js");
	const network = require("@/manager/network-manager.js");
	const dialog = require("@/utils/dialog.js");
	import moment from 'dayjs'
	import shieldPanel from '@/components/shieldPanel/shieldPanel'

	import rVideo from '@/components/r-video'
	export default {
		name: "card",
		components: {
			rVideo,

			shieldPanel
		},
		props: {
			communtyList: {
				type: Array,
				default: () => {
					return []
				}
			},
			type: {
				type: String,
				default: () => {
					return 'list'
				}
			},
			from: {
				type: String,
				default: ''
			},
			isLocalResources: {
				type: String,
				default: "false"
			},

		},
		computed: {
			loginId() {
				return app.getUserId()
			}
		},
		data() {
			return {
				imageConfig: '?x-oss-process=image/resize,m_lfit,w_750',
				defaultImg: 'https://dnsverify.pfmoto.com/appstatic/img/my_icon_avatar_unlogin',
				openScreen: false,
				thumbFlag: false,
				focusFlag: false,
				jumpTimer: null,
				timeOutEvent: -1,
				showShielid: false,
				shielid: '',
				touchFlag: false,
				style: {
					// 字符串的形式
					p: 'width:100%;word-break:break-all',
					span: 'width:100%;word-break:break-all'
				},
				loginId: app.getUserId()

			};
		},
		filters: {
			timeFrom(dateTime = null, format = 'yyyy-mm-dd') {
				var format = format || 'yyyy-mm-dd'
				var timestamp = Number(Date.parse(dateTime))

				let timer = (Number(new Date()) - timestamp) / 1000;
				// 如果小于5分钟,则返回"刚刚",其他以此类推
				// console.log(timer,'----')
				let tips = '';
				switch (true) {
					case timer < 300:
						tips = '刚刚';
						break;
					case timer >= 300 && timer < 3600:
						tips = parseInt(timer / 60) + '分钟前';
						break;
					case timer >= 3600 && timer < 86400:
						tips = parseInt(timer / 3600) + '小时前';
						break;
					case timer >= 86400 && timer < 86400 * 3:
						tips = parseInt(timer / 86400) + '天前';
						break;
					default:
						// 如果format为false，则无论什么时间戳，都显示xx之前
						if (format === false) {
							if (timer >= 2592000 && timer < 365 * 86400) {
								tips = parseInt(timer / (86400 * 30)) + '个月前';
							} else {
								tips = parseInt(timer / (86400 * 365)) + '年前';
							}
						} else {
							tips = moment(dateTime).format('YYYY-MM-DD')
						}
				}
				return tips;
			}
		},

		computed: {
			dataList: {
				get() {
					return this.communtyList
				},
				set(v) {

				}

			}
		},
		onShow() {
			console.log('============------------------')
		},
		mounted() {

			this.dataList = this.communtyList
		},
		methods: {
			enterPersionCenter(e, item) {
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
				if (util.isLogin(getApp())) {
					uni.navigateTo({
						url: '/module_my/pages/personalCenter/personalCenter?item=' + JSON.stringify(item)
					})
				} else {
					util.jumpLogin()
				}

			},
			cancleComplate() {
				this.showShielid = false
				this.$emit('changeShowButton', false)
			},
			longPress(val) {
				console.log(val)
				var that = this
				var itemList = []
				if (that.isLocalResources == 'true') {
					itemList = ['举报']
				} else {
					itemList = ['屏蔽用户 ', '举报']
				}
				uni.showActionSheet({
					itemList: itemList,
					success: function(res) {
						if (that.isLocalResources == 'true') {
							val.type = '1'
						} else {
							val.type = res.tapIndex
						}
						debugger
						that.shielid = val
						that.$emit('changeShowButton', true)
						that.showShielid = true
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			handletouchstart(e, item) {
				var that = this
				this.timeOutEvent = setTimeout(() => {
					that.touchFlag = true
					that.longPress(item)

				}, 1000) //这里设置定时器，定义长按1000毫秒触发长按事件，时间可以自己改，  

			},
			handletouchend(e, item) {
				clearTimeout(this.timeOutEvent); //清除定时器    
				var that = this

				if (!this.touchFlag) {
					that.enterPersionCenter(e, item)
				}
				this.touchFlag = false

				return false;
			},
			handletouchmove() {

				// clearTimeout(this.timeOutEvent); //清除定时器    
				// this.timeOutEvent = 0;
			},
			onLongPress(item) {
				this.$emit('longPress', item)
			},

			//改变视频状态-全屏
			screenChange: function(inedx) {
				this.myVideo = uni.createVideoContext('myVideo' + inedx);
				if (this.openScreen == false) {
					this.myVideo.requestFullScreen()
					this.openScreen = true
				} else {
					this.myVideo.exitFullScreen()
					this.openScreen = false;
				}
			},
			// 文章正文图片点击效果
			preViewRich(e) {

				if (e.detail.node.name == 'img') {
					this.previewArtivceImage(e.detail.node.attrs.src)
				}
			},
			//图片加载错误默认图
			imgerror: function(e, img_index) {
				var _this = this
				if (_this.dataList.length > 0) {
					_this.dataList[img_index].userimages =
						"https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png"
				}
			},
			setData(list) {
				this.dataList = list
			},
			videoPlay(src) {
				uni.navigateTo({
					url: '/module_my/pages/videoDetail/videoDetail?src=' + src
				})
			},

			focusCommunity(e, item) {
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
				if (app.getUserId() == item.authorId) {
					uni.showToast({
						title: '不可关注自己',
						duration: 3000,
						icon: 'none'
					})
					return
				}

				var that = this
				if (util.isLogin(getApp())) {
					if (this.focusFlag) {
						return
					}
					this.focusFlag = true
					if (item.isFocus == 1) {
						var params = {
							"fanId": app.getUserId(),
							"authorId": item.authorId,
						};
						// var uri = app.globalData.config.interfaces.URI_COMMUNITY_FOCUS_CANCEL;
						var uri = ''
						if (this.isLocalResources == 'true') {
							uri = app.globalData.config.interfaces.URI_LOCAL_FOCUS_CANCEL;
						} else {
							uri = app.globalData.config.interfaces.URI_COMMUNITY_FOCUS_CANCEL;
						}
						network.post(uri, params, 'json').then(res => {
							if (res.code == 200) {
								that.dataList.map(v => {
									if (v.authorId == item.authorId) {
										v.isFocus = 0

									}
								})

							} else {
								uni.showToast({
									title: res.message,
									duration: 3000,
									icon: 'none'
								})
							}
							that.focusFlag = false
						}).catch(res => {
							that.focusFlag = false
							setTimeout(() => {
								uni.showToast({
									title: res.errMsg,
									duration: 3000,
									icon: 'none'
								})
							}, 500)
							console.error(res);
						});
					} else {
						var params = {
							"brankId": item.id,
							"fanId": app.getUserId(),
							"authorId": item.authorId,
							"isfrom": 4,
							"isSource": item.subType

						};
						// var uri = app.globalData.config.interfaces.URI_COMMUNITY_FOCUS;
						var uri = ''
						if (this.isLocalResources == 'true') {
							uri = app.globalData.config.interfaces.URI_LOCAL_FOCUS;
						} else {
							uri = app.globalData.config.interfaces.URI_COMMUNITY_FOCUS;
						}
						network.post(uri, params, 'json').then(res => {
							if (res.code == 200) {
								that.dataList.map(v => {
									if (v.authorId == item.authorId) {
										v.isFocus = 1

									}
								})

							} else {
								setTimeout(() => {
									uni.showToast({
										title: res.message,
										duration: 3000,
										icon: 'none'
									})
								}, 500);
							}
							that.focusFlag = false
						}).catch(res => {
							that.focusFlag = false
							setTimeout(() => {
								uni.showToast({
									title: res.errMsg,
									duration: 3000,
									icon: 'none'
								})
							}, 500);
							console.error(res);
						});
					}

				} else {
					util.jumpLogin(this.from)
				}
			},

			enterDetail(row) {

				console.log(row)

				var _self = this
				if (row.subType == '1') {
					var url = '/module_community/pages/moments/detail/detail?id=' + row.id
				} else {
					var url = '/module_community/pages/article/detail/detail?id=' + row.id + '&isLocalResources=' + this
						.isLocalResources
				}
				if (this.type == 'detail') {
					return false
				}
				if (this.jumpTimer) {
					return
				}
				this.jumpTimer = setTimeout(function() {
					//#ifndef MP-WEIXIN
					wx.navigateTo({
						url: url,
						fail(err) {
							clearTimeout(_self.jumpTimer)
							_self.jumpTimer = null
						},
						success() {
							clearTimeout(_self.jumpTimer)
							_self.jumpTimer = null

						}
					});
					//#endif
					uni.navigateTo({
						url: url,
						fail(err) {
							clearTimeout(_self.jumpTimer)
							_self.jumpTimer = null
						},
						success() {
							clearTimeout(_self.jumpTimer)
							_self.jumpTimer = null

						}
					});
				}, 500)


			},
			enternTopicDetail(e, row) {
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
				uni.navigateTo({
					url: '/module_community/pages/topic/detail/detail?id=' + row.id,
					fail(err) {
						console.log(err, 'err')
					}
				});
			},
			openMement(e, item) {
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
				uni.hideTabBar()
				this.$emit('openMement', item, true)
			},
			//点赞社区动态
			thumbCommuntyTouched: function(e, item) {
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
				var that = this
				if (util.isLogin(getApp())) {
					if (this.thumbFlag) {
						return
					}
					this.thumbFlag = true
					this.detail = item
					// var uri = app.globalData.config.interfaces.URL_COMMUNTIY_THUMB;
					var uri = ''
					var isfrom = ''
					if (this.isLocalResources == 'true') {
						uri = app.globalData.config.interfaces.URL_LOCAL_RESOURCES_THUMB;
						isfrom = '0'
					} else {
						uri = app.globalData.config.interfaces.URL_COMMUNTIY_THUMB;
						isfrom = '2'
					}
					var thumbsFlag
					this.detail.isThumbs == 0 ? thumbsFlag = 1 : thumbsFlag = 0
					var params = {
						"id": item.id,
						"loginId": app.getUserId(),
						"isfrom": isfrom,
						"thumbsFlag": thumbsFlag
					};
					network.post(uri, params, 'form').then(res => {
						if (res.code == 200) {
							item.thumbsNum = item.thumbsNum + (!item.isThumbs ? 1 : -1);
							item.isThumbs = !item.isThumbs;
						} else {
							setTimeout(() => {
								uni.showToast({
									title: res.message,
									duration: 3000,
									icon: 'none'
								})
							}, 500)
						}
						that.thumbFlag = false
					}).catch(res => {
						that.thumbFlag = false
						setTimeout(() => {
							uni.showToast({
								title: res.errMsg,
								duration: 3000,
								icon: 'none'
							})
						}, 500)
						console.error(res);
					});
				} else {
					util.jumpLogin(this.from)
				}
			},
			previewArtivceImage(e, img) {
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif

				//#ifndef MP-WEIXIN
				wx.previewImage({
					current: 0,
					urls: [img],
				});
				//#endif

				uni.previewImage({
					current: 0,
					urls: [img]
				});
			},
			preventItemClick(e) {
				console.log("preventItemClick2");
				// e.preventDefault();
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
			},
			/**
			 * 预览图片
			 */
			previewImage: function(e, list, index) {
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
				var imgList = JSON.parse(JSON.stringify(list))

				// var current = e.target.dataset.src;
				// var items = e.target.dataset.items;
				//#ifndef MP-WEIXIN
				wx.previewImage({
					current: index,
					urls: imgList,
				});
				//#endif

				uni.previewImage({
					current: index,
					urls: imgList,
				});
			},
		},
		options: {
			styleIsolation: 'shared'
		},
	}

	// Component({
	//   options: {
	//   	multipleSlots: true // 在组件定义时的选项中启用多slot支持
	//   }
	// })
</script>

<style scoped>
	.expertCertification_image {
		width: 100rpx;
		height: 28rpx;
		margin-left: 6rpx;

	}

	.renzheng {
		display: flex;
		flex-direction: row;
		margin-left: 6rpx;
		margin-top: -6rpx;
		margin-right: 20rpx;
	}

	.icon-ok {
		width: 16px;
		height: 16px;
		margin-right: 4rpx;
	}

	.user-tips {
		font-style: normal;
		font-weight: 500;
		font-size: 20rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		color: #ADB0AE;
	}

	.user-name {
		/* font-style: normal;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #3d3a3a; 
		background-color: red */
		display: flex;
		align-items: flex-start;
		align-content: center;
		margin-left: 16rpx;
		flex-direction: column;
	}

	.user-name-view {
		display: flex;
		flex-direction: row;
		/* align-items:center; */
	}

	.user_name_text {
		font-size: 28rpx;
		/* width: 450rpx; */
		max-width: 400rpx;
		padding-left: 10rpx;
		margin-top: 8rpx;
		height: 40rpx;
		overflow: hidden;
		/* #ifndef APP-PLUS-NVUE */
		-webkit-line-clamp: 1;
		display: block;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		text-align: justify;
		/* #endif */
		/* #ifdef APP-PLUS-NVUE */
		overflow: hidden;
		text-overflow: ellipsis;

		lines: 1;
		/* #endif */
	}




	.badge_image {
		width: 60rpx;
		height: 60rpx;
		margin-left: 10rpx;
		/* bottom: 8rpx; */
		z-index: 10;
		bottom: 8rpx;
	}

	.avatar-bottom {

		width: 14px;
		height: 14px;
		position: relative;
		left: -26rpx;
		top: 76rpx;

	}

	.user-action {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 25rpx;
	}



	.detail {
		justify-content: flex-start;
		margin-top: 30rpx;
	}

	.action-wraper {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		top: 3rpx;
	}

	.user-action-img {
		width: 32rpx;
		height: 32rpx;
	}

	.user-action-text {
		font-size: 24rpx;
		color: #ADB0AE;
		margin-right: 16rpx;
		margin-left: 4rpx;
		position: relative;
		top: 2rpx;
		margin-right: 20rpx;
	}

	.topic {
		display: flex;
		margin-top: 30rpx;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.topic-item_img {
		width: 24rpx;
		height: 24rpx;
	}

	.compent {
		width: 690rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		background-color: #ededed;
		padding: 20rpx;
	}

	.compent-user {
		color: #ADB0AE;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		padding-right: 6rpx;
		width: 690rpx;
		/* #ifndef APP-PLUS-NVUE */
		-webkit-line-clamp: 3;
		display: block;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		text-align: justify;
		/* #endif */


		/* #ifdef APP-PLUS-NVUE */
		overflow: hidden;
		text-overflow: ellipsis;

		lines: 3;
		/* #endif */
	}

	.compent-content {
		font-size: 24rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		line-height: 34rpx;
		/* #ifndef APP-PLUS-NVUE */
		text-align: justify;
		/* #endif */

		color: #000000;
		word-break: break-all;

	}

	.topic-item {

		background: rgba(234, 84, 4, 0.1);
		border-radius: 4rpx;
		/* #ifndef APP-PLUS-NVUE */
		display: inline;
		/* #endif */

		padding: 4rpx 16rpx;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		flex-direction: row;
	}

	.topic-item-text {
		color: #EA5404;
		padding-left: 10rpx;
		font-size: 20rpx;
		line-height: 28rpx;
	}


	.user-card {
		padding: 30rpx 0;
		width: 690rpx;
		margin-left: 30rpx;
		border-bottom: 1px solid #f2f2f2;

	}

	.user-info {
		width: 690rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.gz {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 52rpx;
		/* #ifndef APP-NVUE */
		display: inline-block;
		/* #endif */

		width: 112rpx;
		height: 50rpx;

		text-align: center;
		border: 2rpx solid #EA5404;
		border-radius: 4rpx;
		color: #EA5404;

	}

	.active {
		border: 2rpx solid #ADB0AE;

		color: #ADB0AE;
	}

	.c-left {
		display: flex;
		flex-direction: row;
	}

	.userImg {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;

	}

	.lel-icon {
		width: 42rpx;
		height: 32rpx;
		position: relative;
		top: 4rpx;

		left: 6rpx;
	}



	.media-wraper {
		margin-top: 40rpx;
		margin-bottom: 30rpx;
	}

	.media-wraper-image {
		width: 690rpx;
		height: 517rpx;
		border-radius: 8rpx;
	}

	.media-wraper-image {
		width: 690rpx;
		height: 517rpx;
		border-radius: 8rpx;
	}


	.img-10 {
		width: 690rpx;
		height: 517rpx;
	}



	.img-box2,
	.img-box3 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.img-50,
	.img-51,
	.img-52 {
		width: 217rpx;
		height: 217rpx;
		margin-bottom: 20rpx;
	}

	.media-wraper-image-36 {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.img-20,
	.img-21 {
		width: 335rpx;
		height: 335rpx;
	}


	.img-box5,
	.img-box9,
	.img-box4,
	.img-box6,
	.img-box3,
	.img-box7,
	.img-box8 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;

	}

	.img-40,
	.img-41,
	.img-42,
	.img-43,
	.img-53,
	.img-54 {
		width: 335rpx;
		height: 335rpx;
		margin-bottom: 20rpx;
	}

	.img-83,
	.img-84,
	.img-70,
	.img-71,
	.img-75,
	.img-76 {
		width: 335rpx;
		height: 217rpx;
		margin-bottom: 20rpx;
	}

	.img-90,
	.img-91,
	.img-92,
	.img-93,
	.img-94,
	.img-95,
	.img-96,
	.img-97,
	.img-98 {
		width: 217rpx;
		height: 217rpx;
		margin-bottom: 20rpx;
	}



	.img-61,
	.img-62,
	.img-63,
	.img-64,
	.img-65,
	.img-72,
	.img-73,
	.img-74,
	.img-80,
	.img-81,
	.img-82,
	.img-85,
	.img-86,
	.img-87 {
		width: 217rpx;
		height: 217rpx;
		margin-bottom: 20rpx;
	}

	.img-60 {
		width: 450rpx;
		height: 450rpx;
		margin-bottom: 20rpx;
	}

	/* 	.img-62,
	.img-32 {
		position: absolute;
		top: 237rpx;
		right: 0;
	}

	.img-61,
	.img-31 {
		position: relative;
		top: 0;
		right: -12rpx;
	} */

	.img-30 {
		width: 450rpx;
		height: 450rpx;
	}

	.img-31,
	.img-32 {
		width: 217rpx;
		height: 217rpx;
	}

	/* #ifndef APP-NVUE */


	/* #endif */


	.content {
		margin-top: 30rpx;
		color: #000000;
	}

	.rich-text {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 28rpx;
		width: 690rpx;
		line-height: 40rpx;
		max-height: 240rpx;
		color: #3d3a3a;

		overflow: hidden;
		/* #ifndef APP-PLUS-NVUE */
		text-overflow: ellipsis;

		display: -webkit-box;

		-webkit-line-clamp: 6;

		-webkit-box-orient: vertical;
		/*设置超过为省略号的行数*/
		overflow: hidden;
		text-align: justify;
		/* #endif */


		/* #ifdef APP-PLUS-NVUE */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		lines: 6;
		/* #endif */

	}

	.detail_ {
		height: auto !important;
		max-height: 10000px !important;
		/* #ifndef APP-PLUS-NVUE */
		display: block;
		-webkit-box-orient: vertical;
		/*设置方向*/
		-webkit-line-clamp: 1111;
		/*设置超过为省略号的行数*/
		overflow: hidden;
		text-align: justify;
		/* #endif */

	}




	/* #ifndef APP-PLUS-NVUE */
	.content .detail_ p {
		overflow-wrap: break-word;
		margin: 20rpx 0;
		text-align: left;
		width: 100%;
		word-break: break-all;
		white-space: pre-wrap;
		word-wrap: break-word;
	}

	.play {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
	}

	.play image {
		display: block;
		transform: translate(-50%, -50%);
		position: absolute;
		left: 50%;
		top: 50%;
	}

	/* #endif */
</style>